<script setup lang="ts">
import { useRoute } from 'vue-router'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted } from 'vue'
import { ref } from 'vue'
import type { WorkbenchI } from '@/types/workbench'
import { workbenchGetBaseInfoApi } from '@/apis/workbench'
import BillDialog from '../property/components/BillDialog.vue'
import type { ListDataSimpleI, ListParams } from '@/types'
import { propertyGetBuildListApi, propertyGetEnListApi } from '@/apis/property'

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
  BarChart,
  CanvasRenderer,
])

const workbench = ref<WorkbenchI>({
  annualIncome: 0, // 年收入
  enterpriseTotal: 0, // 企业总数
  monthCardTotal: 0, // 月卡总数
  chargePoleTotal: 0, // 一体杆总数
  annualIncomeArray: {
    ybuilding: [],
    yparking: [],
    xmonth: [],
  },
})
let xMonth: number[] = []
let yBuilding: number[] = []
let yParking: number[] = []
const getWorkbench = async () => {
  workbench.value = await workbenchGetBaseInfoApi()
  xMonth = workbench.value.annualIncomeArray.xmonth
  yBuilding = workbench.value.annualIncomeArray.yparking
  yParking = workbench.value.annualIncomeArray.ybuilding
  setEcharts()
}
let myChart: echarts.ECharts | null = null
const yearEchartRef = ref()

const setEcharts = () => {
  myChart = echarts.init(yearEchartRef.value)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        z: 0,
        lineStyle: {
          color: 'rgb(0, 0, 0, 0.03)',
          width: 50,
        },
      },
      formatter: function (params: any) {
        let month = params[0].name
        let total = parseInt(params[0].data + params[1].data)
        let building = parseInt(params[1].data)
        let parking = parseInt(params[0].data)
        let tepmlate = `
          <div>
            <div>${month}</div>
            <div>总收入：${total}</div>
            <div>物业费：${building}</div>
            <div>行车收入：${parking}</div>
          </div>
        `
        return tepmlate
      },
    },
    legend: {
      selectedMode: false,
    },
    xAxis: {
      type: 'category',
      data: xMonth,
    },
    yAxis: {},
    dataZoom: [
      {
        type: 'inside',
      },
    ],
    series: [
      {
        type: 'bar',
        name: '物业费',
        stack: 'total',
        itemStyle: {
          color: 'rgb(89, 119, 252)',
        },
        data: yBuilding,
      },
      {
        type: 'bar',
        name: '行车收入',
        stack: 'total',
        itemStyle: {
          color: 'rgb(205, 228, 255)',
        },
        data: yParking,
        barWidth: '25%',
      },
    ],
  }
  // Enable data zoom when user click bar.
  const zoomSize = 6
  myChart.on('click', function (params) {
    myChart!.dispatchAction({
      type: 'dataZoom',
      startValue: xMonth[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        xMonth[Math.min(params.dataIndex + zoomSize / 2, xMonth.length - 1)],
    })
  })

  myChart.setOption(option)
}
const route = useRoute()

onMounted(() => {
  getWorkbench()
})
/**
 * 添加账单
 */
const dialogVisible = ref(false)
let enList: ListDataSimpleI[] = []
let buildingList: ListDataSimpleI[] = []
const getEnBuildingList = async () => {
  enList = await propertyGetEnListApi()
  buildingList = await propertyGetBuildListApi()
}
getEnBuildingList()
/**
 * 临期合同提醒
 */
const listParams = ref<ListParams>({
  page: 1,
  pageSize: 8,
})
const total = ref(0)
const changePage = (page: number) => {
  listParams.value.page = page
}
const changePageSize = (pageSize: number) => {
  listParams.value.pageSize = pageSize
}
</script>

<template>
  <div class="workbench-page">
    <el-row :gutter="20">
      <el-col :span="17">
        <div class="card-container">
          <div class="card-title">园区数据</div>
          <div class="card-statistic">
            <el-statistic :value="workbench.annualIncome">
              <template #title>年度累计收费（元）</template>
            </el-statistic>
            <el-statistic :value="workbench.enterpriseTotal">
              <template #title>入驻企业总数（个）</template>
            </el-statistic>
            <el-statistic :value="workbench.monthCardTotal">
              <template #title>月卡车辆总数（辆）</template>
            </el-statistic>
            <el-statistic :value="workbench.chargePoleTotal">
              <template #title>一体杆总数（台）</template>
            </el-statistic>
          </div>
        </div>
        <div class="card-container">
          <div class="card-title">年度收入统计</div>
          <div ref="yearEchartRef" style="height: 300px; width: 100%"></div>
        </div>
        <div class="card-container">
          <div class="card-title">临期合同提醒</div>
          <div>
            <!-- 表格区域 -->
            <el-table style="height: 245px">
              <el-table-column
                label="序号"
                type="index"
                width="80"
                align="center"
              />
              <el-table-column label="企业名称" align="center" />
              <el-table-column label="租赁楼宇" align="center" />
              <el-table-column label="租赁时间" align="center" />
              <el-table-column label="操作" align="center">
                <template #default="{ row }">
                  <el-button type="text">删除</el-button>
                </template>
              </el-table-column>
              <template #empty>
                <el-empty style="margin: 0 auto; padding: 0">
                  <template #description />
                </el-empty>
              </template>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
              v-model:current-page="listParams.page"
              v-model:page-size="listParams.pageSize"
              layout="total, prev, pager, next, slot, jumper"
              :total="total"
              @current-change="changePage"
            >
              <el-select
                style="width: 95px"
                v-model="listParams.pageSize"
                @change="changePageSize"
              >
                <el-option label="8条/页" :value="8" />
                <el-option label="10条/页" :value="10" />
                <el-option label="15条/页" :value="15" />
              </el-select>
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="card-container">
          <div class="card-title">快捷入口</div>
          <div class="card-entry">
            <div
              class="card-entry-item"
              @click="$router.push('/patk/enterprise/add')"
            >
              <img src="@/assets/entry-enterprise.png" alt="" />
              <span>添加企业</span>
            </div>
            <div class="card-entry-item" @click="$router.push('/sys/user')">
              <img src="@/assets/entry-employee.png" alt="" />
              <span>员工管理</span>
            </div>
            <div class="card-entry-item" @click="dialogVisible = true">
              <img src="@/assets/entry-bill.png" alt="" />
              <span>添加账单</span>
            </div>
            <div class="card-entry-item">
              <img src="@/assets/entry-screen.png" alt="" />
              <span>数据大屏</span>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-title">设备告警派单</div>
          <div class="card-statistic" style="display: block">
            <el-empty style="margin: 0 auto; padding: 0">
              <template #description>
                <div style="text-align: center" />
              </template>
            </el-empty>
            <el-button
              @click="$router.push('/pole/warning')"
              type="primary"
              style="
                width: 80%;
                margin: 10px 10%;
                height: 34px;
                border-radius: 17px;
              "
              >更多&nbsp;&nbsp;＞</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 弹层区域 -->
    <bill-dialog
      v-model:dialogVisible="dialogVisible"
      :enList="enList"
      :buildingList="buildingList"
      @success="getWorkbench"
    />
  </div>
</template>

<style lang="scss" scoped>
.workbench-page {
  overflow-y: scroll;
  scrollbar-width: none;
  background-color: #f4f6f8;
  height: 100%;
  .card-container {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;

    .el-table {
      width: 100%;
      height: 400px;
      margin: 20px 0;

      ::v-deep(.el-table__header th) {
        background-color: rgb(237, 237, 237, 0.9);
        color: rgb(43, 37, 37);
        padding: 10px 0;
      }

      ::v-deep(.el-table__body tr) {
        height: 50px;
      }
    }

    .el-pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
  .card-title {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
  }
  .card-statistic {
    display: flex;
    justify-content: space-between;
  }
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
  --el-statistic-title-font-size: 13px;
}
:deep(.el-statistic__head) {
  margin-bottom: 12px;
}

.card-entry {
  display: flex;
  justify-content: space-between;
  &-item {
    cursor: pointer;

    text-align: center;
    img {
      width: 40px;
    }
    span {
      font-size: 12px;
      display: block;
      margin-top: 8px;
    }
  }
}
</style>
